<template>
	<el-row class="course-catalog-row">
		<el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="4" v-for="(o, index) in datas" :key="index" class="item">
			<div class="course-card-box">
				<div class="course-card-top">
					<img class="course-banner" :src="'/static/img/illustration/i00'+index+'.jpg'">
				</div>
				<div class="course-card-content">
					<h3>{{o.courseName}}</h3>
					<div class="bottom">
						<div class="course-student-info-box" v-if="scoreList.length>0">
							<span>平时成绩：{{scoreList[index].score}}</span>
							<div class="clear"></div>
						</div>
						<div class="course-student-info-box" v-if="attendanceList.length>0">
							<span>迟到：{{attendanceList[index].late}}</span>
							<span>缺勤：{{attendanceList[index].attendance}}</span>
							<div class="clear"></div>
						</div>
						<div class="course-student-info-box">
							<span class="bottom-footer">{{o.teacherName}}</span>
							<el-button type="text" class="button" @click="$router.push({path:'/cdetail?c='+o.courseId+'&t='+o.teacherId})">进入课程<i class="el-icon-d-arrow-right"></i></el-button>
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>
		</el-col>
		<!--工具条-->
		<el-col v-if="isLoading" :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</el-row>
</template>

<script>
  import {getRelevancyList,getStudentAttendanceList,getStudentScoreList} from '../../api/api';

  export default {
    data() {
      return {
        schoolYear:'',
        semester:'',
        userId:'',
        classId:'',
        attendanceList: [],
        scoreList: [],
        datas:[],
        total:'',
        page: 0,
        isLoading: false,
      };
    },

    filters:{
      filter_score:function (val) {
        console.log(val);
      },
    },

    computed:{
      filter_score:function (val) {
        console.log(val);
        return this.scoreList.find(item => item.courseId === val)['score'];
      },
      filter_late:function (val) {
        return this.attendanceList.find(item => item.courseId === val)['late'];
      },
      filter_attendence:function (val) {
        return this.attendanceList.find(item => item.courseId === val)['attendence'];
      },
    },

    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getData(this.userId,this.schoolYear,this.semester);
      },

      getStudentAttendanceData(val) {
        let para = {
          count: 1000000,
          pageNo: 0,
          sortDirection: 'asc',
          sortField: ["studentSchoolNumber"],
          classId: '',
          courseId: '',
          teacherId: '',
          studentName: '',
          studentSchoolNumber: '',
          studentId: val,
        };
        getStudentAttendanceList(para).then((res) => {
          console.log(res.data.data.content);
          for(let i = 0; i < this.datas.length; i++){
            this.attendanceList.push({
			  late: res.data.data.content.find(item => item.courseId === this.datas[i].courseId)['late'],
			  attendance: res.data.data.content.find(item => item.courseId === this.datas[i].courseId)['attendence']
			});
          }
        });
      },

      getStudentScoreData(val) {
        let para = {
          count: 10,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["studentSchoolNumber"],
          classId: '',
          courseId: '',
          teacherId: '',
          studentName: '',
          studentSchoolNumber: '',
          studentId: val,
        };
        getStudentScoreList(para).then((res) => {
          this.scoreList = res.data.data.content;
          for(let i = 0; i < this.datas.length; i++){
            this.scoreList.push({score:res.data.data.content.find(item => item.courseId === this.datas[i].courseId)['score']});
          }
        });
      },

      getData(val1,val2,val3) {
        console.log(val1+'\n'+val2+'\n'+val3);
        let para = {
          count: 24,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["name"],
          departmentId: '',
          specialtyId: '',
          classId: val1,
          courseId: '',
          year: val2,
          teacherId: '',
          semester: val3,
        };
        getRelevancyList(para).then((res) => {
          console.log(res);
          this.isLoading = true;
          this.total = res.data.data.totalPages;
          if(res.data.data.content.length>0){
            this.datas =  res.data.data.content;
            this.getStudentAttendanceData(this.userId);
            this.getStudentScoreData(this.userId);
          }
        });
      },
    },
    mounted() {
      let newDate = new Date();
      let year = newDate.getFullYear();
      let val1 = year-1;
      let val2 = year+1;
      let schoolYear;
      let semester;
      let month = newDate.getMonth()+1;

      if(month >= 9){
        schoolYear = year+'-'+val2;
        semester = 1
      }else{
        schoolYear = val1+'-'+year;
        semester = 2
      }

      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.classId = user.classId;
      this.getData(user.classId,schoolYear,semester);
    }
  }
</script>

<style lang="less">
	.grid-content{
		height: 100%;
		.content-wrapper{
			position: relative;
			min-height: calc(100% - 40px);
			.course-catalog-row{
				position: static;
				padding-bottom: 100px;
				.toolbar{
					position: absolute;
					bottom: 0;
					background-color: #d7dae0;
				}
			}
		}
	}
</style>